<template>
  <div class="mistake-container">
    <h2>错题列表</h2>
    <el-table :data="mistakes" style="width: 100%">
      <el-table-column prop="questionText" label="问题" width="200"></el-table-column>
      <el-table-column prop="correctAnswer" label="正确选项" width="100"></el-table-column>
      <el-table-column prop="correctOptionText" label="正确选项内容" width="200"></el-table-column>
      <el-table-column prop="userAnswer" label="作答选项" width="100"></el-table-column>
      <el-table-column prop="userOptionText" label="作答选项内容" width="200"></el-table-column>
      <el-table-column prop="questionType" label="题目类别" width="100"></el-table-column>
    </el-table>
    <p v-if="mistakes && mistakes.length === 0">没有找到错题。</p>
  </div>
</template>
  
  <script>
import { getMistakes } from "@/api/center/mistake";
import store from "@/store";

export default {
  data() {
    return {
      mistakes: [], // 初始化为空数组
      userId: null
    };
  },
  created() {
    this.userId = this.$store.state.user.id;
    this.fetchMistakes();
  },
  methods: {
    async fetchMistakes() {
      try {
        const response = await getMistakes(this.userId);

        this.mistakes = response.map(item => ({
          questionText: item.questionText,
          correctAnswer: item.correctAnswer,
          correctOptionText: item.correctOptionText,
          userAnswer: item.userAnswer,
          userOptionText: item.userOptionText,
          questionType: item.questionType
        }));
        console.log("Fetched Mistakes:", this.mistakes); // 确保这里打印出了数据
      } catch (error) {
        console.error("获取错题时出错:", error);
      }
    }
  }
};
</script>
  
  <style scoped>
.mistake-container {
  padding: 20px;
}

h2 {
  margin-bottom: 10px;
}

.el-table {
  margin-top: 10px;
}
</style>